$theme: #00bfb1 !important;

/*文字/背景颜色*/
$colors: (
  main: $theme,
  hui: #21333f,
  hui1: #4a5b66,
  hui3: #5f717d,
  hui4: #b5c4d0,
  navleft: #aeb3bf,
  navleftbg: #eceff6,
  red: #f54562,
  blue: #609cff,
  lv: #2bff99,
  white: #fff,
  huang: #ffc600,
  cs: #f86b4f,
  test: #00e1ff,
  try: #00b7ff,
);

@each $label, $map in $colors {
  .cr-#{$label} {
    color: #{$map};
  }
  .cr-bg-#{$label} {
    background-color: #{$map};
  }
}
.formBox {
  border: 1px solid #dde4eb;
  padding:20px;
  padding-bottom: 0px;
  box-sizing: border-box;
}
.bold {
  font-weight: bold;
}

.min_head {
  color: #ccf2ff;
  text-shadow: 0 0 4px rgba(204, 242, 255, 0.8);
}

.cursor {
  cursor: pointer;
}

.width {
  width: 100%;
  height: 100%;
}

/* 位置样式 */
.center {
  text-align: center;
}

.left {
  text-align: left;
}
.lookline {
  position: relative;
  width: 26px;
  height: 1px;
  background: #00bfb1;
}
.right {
  text-align: right;
}

.auto {
  margin: 0 auto;
}

.flex-common {
  display: flex;
  align-items: center;
}

.flex {
  @extend .flex-common;
  justify-content: space-between;
}

.flex-start {
  @extend .flex-common;
  justify-content: flex-start;
}

.flex-center {
  @extend .flex-common;
  justify-content: center;
}

.flex-column {
  @extend .flex-common;
  flex-direction: column;
}
.flex-around {
  @extend .flex-common;
  justify-content: space-around;
}
.flex-column-cus {
  display: flex;
  flex-direction: column;
}
.cursor {
  cursor: pointer;
}
/* 按钮 */
.submitBtn {
  height: 26px;
  border: 1px solid #00deff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  box-shadow: 0 0 8px #00deff inset;
  font-size: 14px;
  padding: 2px 12px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
  background: #103657;
}

.submitBtn:hover {
  background: rgba(0, 222, 255, 0.3);
}

.minBtn {
  height: 26px;
  line-height: 26px;
  text-align: center;
  box-shadow: 0px 0px 6px 2px rgba(0, 222, 255, 0.3) inset;
  border: 1px solid #00deff;
  color: #fff;
  font-weight: bold;
  padding: 0 16px;
  border-radius: 2px;
  cursor: pointer;
  background-color: #202329;
}

.arrow-right {
  width: 12px;
  height: 12px;
  // background: url("~@/assets/images/common/arrow-right.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 8px;
}

/* 公共外框样式 */
.commonWrap {
  position: absolute;
  top: 100px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  overflow: hidden;
  box-sizing: border-box;
}
.spotBig {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  position: relative;
}
.commonBox {
  width: 88.5%;
  height: 96%;
  position: absolute;
  top: 16px;
  left: 160px;
  bottom: 16px;
  background-color: #202329;
  .Main {
    position: absolute;
    top: 102px;
    right: 24px;
    left: 24px;
    bottom: 24px;
    box-sizing: border-box;
    background: #202329;
  }
}
.min_popup {
  width: 660px !important;
  height: 760px !important;
  // background: url("~@/assets/images/common/popup_mbg.png") no-repeat !important;
  background-size: 100% 100%;
}
.mains {
  height: 100%;
  position: relative;
  .min_main {
    height: 88%;
    overflow: auto;
    scroll-behavior: smooth;
  }
}

/* 遮罩 */
.Mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 112;
  background-color: rgba(0, 0, 0, 0.5);
}

/*动画样式*/
.animate__fadeInLeftBig,
.animate__backInLeft,
.animate__fadeInUp,
.animate__fadeOutDown {
  animation-duration: 400ms;
}

/*
    快捷样式
    文字大小相关，注意书写的大小、间距都由这里循环得出，没匹配到的则不生效
    使用方式 class="fs-12"
*/
$sizes: 0, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 22, 23, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44,
  46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72;

@each $item in $sizes {
  .fs-#{$item} {
    font-size: #{$item}px !important;
  }

  .pl-#{$item} {
    padding-left: #{$item}px !important;
  }

  .pr-#{$item} {
    padding-right: #{$item}px !important;
  }

  .pt-#{$item} {
    padding-top: #{$item}px !important;
  }

  .pb-#{$item} {
    padding-bottom: #{$item}px !important;
  }

  .paddingT-#{$item} {
    padding: #{$item}px 0 !important;
  }

  .paddingL-#{$item} {
    padding: 0 #{$item}px !important;
  }

  .padding-#{$item} {
    padding: #{$item}px !important;
  }

  .ml-#{$item} {
    margin-left: #{$item}px !important;
  }

  .mr-#{$item} {
    margin-right: #{$item}px !important;
  }

  .mt-#{$item} {
    margin-top: #{$item}px !important;
  }

  .mb-#{$item} {
    margin-bottom: #{$item}px !important;
  }

  .marginL-#{$item} {
    margin: 0 #{$item}px !important;
  }

  .marginT-#{$item} {
    margin: #{$item}px 0 !important;
  }

  .margin-#{$item} {
    margin: #{$item}px !important;
  }

  .lh-#{$item} {
    line-height: #{$item}px !important;
  }
  .flex#{$item} {
    flex: #{$item} !important;
  }
}
